<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .component{
            display: none;
        }
    </style>

</head>
<body>
<ul>
    <li><a href="#/home">home</a><li>
    <li><a href="#/about">about</a></li>
</ul>
<div id="routeView"></div>

<div class="component" data="home">
    componet home
</div>
<div class="component" data="about">
    componet about
</div>
</body>
<script>

    window.addEventListener('DOMContentLoaded', onLoad)
    // 监听路由变化
    window.addEventListener('hashchange', onHashChange)
    // 路由视图
    var routerView = null
    function onLoad () {
        routerView = document.querySelector('#routeView')
        onHashChange()
    }
    // 路由变化时，根据路由渲染对应 UI
    function onHashChange () {
        switch (location.hash) {
            case '#/home':
                routerView.innerHTML = document.querySelector('[data=home]').innerHTML
                return
            case '#/about':
                routerView.innerHTML = document.querySelector('[data=about]').innerHTML
                return
            default:
                return
        }
    }

</script>
</html>